<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			table#tab{
				border: 1px solid red;
				border-collapse: collapse;
				width: 500px;
			}
			
			table#tab tr,
			table#tab tr th,
			table#tab tr td {
				border: 1px solid red;
			}
			table#tab tr td a{
				cursor: pointer;
			}
			
			.edit{
				color: #0000FF;
			}
			
			.delete {
				color: #FF0000;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<div id="show">
				<table border="" cellspacing="" cellpadding="" id="tab">
					<thead>
						<tr>
							<th>ID</th>
							<th>商品名称</th>
							<th>商品单价</th>
							<th>商品货源</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody id="tbody">
						<!-- <tr>
							<td>1</td>
							<td>aa</td>
							<td>111</td>
							<td>北京</td>
							<td>
								<a class="edit">编辑</a>
								<a class="delete">删除</a>
							</td>
						</tr> -->
					</tbody>
					
				</table>
			</div>
		</div>
		<script type="text/javascript">
			var arr = [
				{id:1,name:"可乐",price:2,place:"南京"},
				{id:2,name:"xx",price:3333,place:"北京"},
				{id:3,name:"yy",price:44,place:"浙江"},
				{id:4,name:"zz",price:555,place:"温州"}
			]
			var tbody=document.getElementById("tbody");
			tbody.innerHTML="";
			var trs="";
			for (var i = 0; i < arr.length; i++) {
				trs+="<tr>"+
							"<td>"+arr[i].id+"</td>"+
							"<td>"+arr[i].name+"</td>"+
							"<td>"+arr[i].price+"</td>"+
							"<td>"+arr[i].place+"</td>"+
							"<td>"+
								"<a class='edit' onclick=myEdit("+JSON.stringify(arr[i])+")> 编辑 </a>"+
								"<a class='delete' onclick=myDelete("+arr[i].id+")> 删除 </a>"+
							"</td>"+
						"</tr>"
			}
			tbody.innerHTML=trs;
			function myEdit(obj) {
				console.log("你要编辑的数据是:",obj)
			}
			
			function myDelete(id){
				console.log("你要删除的数据id是:",id);
			}
		</script>
	</body>
</html>
